<template>
  <div class="review-detail">
    <!-- 返回按钮 -->
    <div class="back-button">
      <el-button @click="$router.back()">
        <el-icon><ArrowLeft /></el-icon>返回商品详情
      </el-button>
    </div>

    <!-- 评价统计 -->
    <div class="review-stats">
      <div class="overall-rating">
        <div class="rating-value">{{ product.evaluation.percentage / 20 }}</div>
        <div class="rating-stars">
          <el-rate :value="product.evaluation.percentage / 20" disabled show-text text-color="#ff9900" />
        </div>
        <div class="rating-text">好评率 {{ product.evaluation.percentage }}%</div>
      </div>
      
      <div class="rating-distribution">
        <div class="distribution-item" v-for="star in 5" :key="star">
          <span class="star-label">{{ star }}星</span>
          <el-progress :percentage="getStarPercentage(star)" :stroke-width="8" />
          <span class="percentage-text">{{ getStarPercentage(star) }}%</span>
        </div>
      </div>
    </div>

    <!-- 筛选条件 -->
    <div class="review-filters">
      <el-radio-group v-model="activeFilter" @change="handleFilterChange">
        <el-radio-button label="all">全部评价</el-radio-button>
        <el-radio-button label="hasImage">有图评价</el-radio-button>
        <el-radio-button label="good">好评</el-radio-button>
        <el-radio-button label="medium">中评</el-radio-button>
        <el-radio-button label="bad">差评</el-radio-button>
      </el-radio-group>
    </div>

    <!-- 评价列表 -->
    <div class="review-list">
      <div 
        v-for="(comment, index) in filteredComments" 
        :key="index" 
        class="review-item"
      >
        <div class="review-header">
          <el-avatar :size="40" :src="comment.avatar || 'https://picsum.photos/40/40'"></el-avatar>
          <div class="review-user-info">
            <div class="username">{{ comment.username }}</div>
            <div class="review-time">{{ comment.time }}</div>
          </div>
          <el-rate 
            :value="comment.rating" 
            disabled 
            show-text 
            text-color="#ff9900" 
            class="review-rating"
          />
        </div>

        <div class="review-content">
          <p>{{ comment.content }}</p>
          
          <!-- 评价图片 -->
          <div v-if="comment.images && comment.images.length > 0" class="review-images">
            <img 
              v-for="(img, idx) in comment.images" 
              :key="idx" 
              :src="img" 
              alt="评价图片" 
              class="review-image"
              @click="previewImage(comment.images, idx)"
            >
          </div>
        </div>

        <!-- 商家回复 -->
        <div v-if="comment.reply" class="merchant-reply">
          <div class="reply-label">商家回复：</div>
          <div class="reply-content">{{ comment.reply }}</div>
        </div>

        <!-- 移除互动区域（点赞功能） -->
      </div>
    </div>

    <!-- 图片预览弹窗 -->
    <el-image-viewer 
      v-if="showImageViewer" 
      :url-list="previewImages" 
      :initial-index="previewIndex"
      @close="showImageViewer = false"
    />
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRoute } from 'vue-router'  // 移除useRouter（未使用）
import { ArrowLeft } from '@element-plus/icons-vue'  // 移除ThumbstickUp图标
import { ElRate, ElAvatar, ElProgress, ElRadioGroup, ElRadioButton, ElImageViewer } from 'element-plus'

// 路由相关  
const route = useRoute()
const productId = ref(route.params.productId)

// 状态管理
const product = ref({ evaluation: { percentage: 0, count: 0 } })
const allComments = ref([])
const activeFilter = ref('all')
const showImageViewer = ref(false)
const previewImages = ref([])
const previewIndex = ref(0)

// 模拟评价数据（移除likeCount字段）
const mockReviews = {
  101: {
    evaluation: { percentage: 98, count: 1200 },
    comments: [
      {
        id: 1,
        avatar: 'https://picsum.photos/40/40?random=1',
        username: '张三',
        time: '2023-12-15',
        rating: 5,
        content: '这个产品质量非常好，我已经是第二次购买了，物流也很快，非常满意！',
        images: ['https://picsum.photos/300/300?random=1', 'https://picsum.photos/300/300?random=2'],
        reply: '感谢您的认可，我们会继续努力提供更好的产品和服务！'
        // 移除likeCount
      },
      {
        id: 2,
        avatar: 'https://picsum.photos/40/40?random=2',
        username: '李四',
        time: '2023-12-10',
        rating: 4,
        content: '东西不错，很实用，价格也实惠，值得推荐给大家！',
        images: ['https://picsum.photos/300/300?random=3']
        // 移除likeCount
      },
      {
        id: 3,
        avatar: 'https://picsum.photos/40/40?random=3',
        username: '王五',
        time: '2023-12-05',
        rating: 3,
        content: '产品还行，就是有点小瑕疵，总体来说符合预期。',
        images: [],
        reply: '非常抱歉给您带来不好的体验，我们会加强品控管理'
        // 移除likeCount
      },
      {
        id: 4,
        avatar: 'https://picsum.photos/40/40?random=4',
        username: '赵六',
        time: '2023-11-30',
        rating: 5,
        content: '性价比很高，推荐购买！',
        images: []
        // 移除likeCount
      }
    ]
  },
  201: {
    evaluation: { percentage: 99, count: 2500 },
    comments: [
      {
        id: 10,
        avatar: 'https://picsum.photos/40/40?random=5',
        username: '孙七',
        time: '2023-12-20',
        rating: 5,
        content: '绳子质量很好，很结实，用来捆绑货物非常合适，推荐购买！',
        images: ['https://picsum.photos/300/300?random=10', 'https://picsum.photos/300/300?random=11']
        // 移除likeCount
      },
      {
        id: 11,
        avatar: 'https://picsum.photos/40/40?random=6',
        username: '周八',
        time: '2023-12-18',
        rating: 4,
        content: '价格实惠，长度足够，性价比很高，下次还会再来。',
        images: ['https://picsum.photos/300/300?random=12'],
        reply: '感谢您的支持，我们会继续努力！'
        // 移除likeCount
      }
    ]
  },
  301: {
    evaluation: { percentage: 99, count: 3000 },
    comments: [
      {
        id: 20,
        avatar: 'https://picsum.photos/40/40?random=7',
        username: '吴九',
        time: '2023-12-25',
        rating: 5,
        content: '这是我第三次购买了，质量一直很稳定，非常满意，推荐给大家！',
        images: ['https://picsum.photos/300/300?random=20', 'https://picsum.photos/300/300?random=21']
        // 移除likeCount
      },
      {
        id: 21,
        avatar: 'https://picsum.photos/40/40?random=8',
        username: '郑十',
        time: '2023-12-22',
        rating: 5,
        content: '绳子很结实，长度也很标准，非常实用，值得购买。',
        images: []
        // 移除likeCount
      },
      {
        id: 22,
        avatar: 'https://picsum.photos/40/40?random=9',
        username: '钱十一',
        time: '2023-12-15',
        rating: 2,
        content: '不太满意，用了几次就有点磨损，希望能改进。',
        images: ['https://picsum.photos/300/300?random=22'],
        reply: '非常抱歉给您带来不好的体验，我们会安排客服联系您处理'
        // 移除likeCount
      }
    ]
  }
}

// 加载评价数据
const loadReviewData = () => {
  const mockData = mockReviews[productId.value]
  if (mockData) {
    product.value = mockData
    allComments.value = mockData.comments
  } else {
    console.error('评价数据不存在，商品ID:', productId.value)
  }
}

// 计算各星级占比
const getStarPercentage = (star) => {
  if (!allComments.value.length) return 0
  const count = allComments.value.filter(comment => comment.rating === star).length
  return Math.round((count / allComments.value.length) * 100)
}

// 筛选评价
const filteredComments = computed(() => {
  switch (activeFilter.value) {
    case 'hasImage':
      return allComments.value.filter(comment => comment.images && comment.images.length > 0)
    case 'good':
      return allComments.value.filter(comment => comment.rating >= 4)
    case 'medium':
      return allComments.value.filter(comment => comment.rating === 3)
    case 'bad':
      return allComments.value.filter(comment => comment.rating <= 2)
    default:
      return allComments.value
  }
})

// 筛选条件变化
const handleFilterChange = (value) => {
  activeFilter.value = value
}

// 图片预览
const previewImage = (images, index) => {
  previewImages.value = images
  previewIndex.value = index
  showImageViewer.value = true
}

// 页面挂载时加载数据
onMounted(() => {
  loadReviewData()
})
</script>

<style scoped>
/* 保持原有样式，移除与点赞相关的样式 */
.review-detail {
  padding: 15px;
  max-width: 1200px;
  margin: 0 auto;
}

.back-button {
  margin-bottom: 20px;
  text-align: left;
}

/* 评价统计 */
.review-stats {
  display: flex;
  margin-bottom: 30px;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.overall-rating {
  flex: 0 0 200px;
  text-align: center;
  padding: 10px;
}

.rating-value {
  font-size: 48px;
  font-weight: bold;
  color: #ff9900;
  margin-bottom: 10px;
}

.rating-text {
  color: #666;
  margin-top: 10px;
}

.rating-distribution {
  flex: 1;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}

.distribution-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.star-label {
  width: 40px;
  text-align: right;
}

.percentage-text {
  width: 50px;
}

/* 筛选条件 */
.review-filters {
  margin-bottom: 20px;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 10px;
}

/* 评价列表 */
.review-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.review-item {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 20px;
  background-color: #fff;
}

.review-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.review-user-info {
  flex: 1;
  text-align: left;
  margin-left: 15px;
}

.username {
  font-weight: bold;
  margin-bottom: 5px;
}

.review-time {
  color: #999;
  font-size: 12px;
}

.review-rating {
  white-space: nowrap;
}

.review-content {
  text-align: left;
  margin-bottom: 15px;
  line-height: 1.6;
}

.review-images {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.review-image {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.2s;
}

.review-image:hover {
  transform: scale(1.05);
}

.merchant-reply {
  text-align: left;
  padding: 10px 15px;
  background-color: #f9f9f9;
  border-radius: 4px;
  margin-bottom: 15px;
}

.reply-label {
  color: #ff6700;
  font-weight: bold;
  margin-bottom: 5px;
}
</style>